<template>
  <div>
      <div style="width:100%;background-color:#302C42;">
        <headerComponent :isUserNameShow="false"></headerComponent>
      </div>
    <div class="register-header" style="width: 100%; height: 200px">
      <span class="registerLogo">培训报名</span
      >
    </div>
    <div class="user-register">
      <el-card class="box-card">
        <div v-if="isRegisterIsShow">
          <register-form
            ref="registerForm"
            :captchaIsShow="isShow"
            @registerForm="firstSign"
            :register-params="registerParams"
            :userMessage="userMessage"
          ></register-form>
        </div>
        <div v-else>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="证件类型" prop="cardType">
              <el-select
                v-model="ruleForm.cardType"
                placeholder="请选择证件类型"
                style="width: 190px"
                size="small"
              >
                <el-option label="居民身份证" value="0"></el-option>
                <el-option label="护照" value="1"></el-option>
                <el-option label="港澳居民通行证" value="B"></el-option>
                <el-option label="台湾居民通行证" value="C"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="cardId">
              <el-input
                style="width: 190px"
                size="small"
                v-model="ruleForm.cardId"
              ></el-input>
            </el-form-item>

            <div style="display: flex">
              <div>
                <!-- <el-form-item prop="phone" label="手机号码">
                  <el-input
                    class="inputWidth"
                    size="small"
                    v-model="ruleForm.phone"
                  ></el-input>
                </el-form-item> -->
              </div>
              <!-- <div>
                <el-form-item prop="code" label="短信验证码">
                  <div style="display: flex; align-items: center">
                    <el-input
                      style="width: 120px"
                      size="small"
                      v-model="ruleForm.code"
                    ></el-input>
                    <div>
                      <el-button
                        size="small"
                        style="font-size: unset; margin-left: 10px"
                        @click="codeHandle"
                      >
                        <tencent-captcha
                          ref="captcha"
                          :phone="ruleForm.phone"
                          scene="1"
                        ></tencent-captcha>
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
              </div> -->
            </div>
            <password-captcha ref="captcha" @getCaptcha="getCaptcha"></password-captcha>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')"
                >确认</el-button
              >
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
    <div
      style="
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        background-color: #302c42;
        height: 60px;
        margin-top: 40px;
        position: fixed;
        bottom: 0px;
        z-index: 2;
      "
    >
      <span class="footer-content"
        >Copyright © All Right By
        <a style="color: white; cursor: pointer" href="#"
          >上海财才网信息科技有限公司</a
        ></span
      >
    </div>
  </div>
</template>

<script>
import headerComponent from '../userComponent/headerComponent.vue'
import {userType} from "../../../utils/base";
import { firstsign, getPersonVerifyUrl,getPersonUserInfo } from "../../../request/api";
import registerForm from "../../../components/registerForm/registerForm";
import PasswordCaptcha from '../../../components/TencentCaptcha/passwordCaptcha.vue';
export default {
  name: "index",
  data() {
    var phone_rule = (rule, value, callback) => {
      let phoneRule = /^1[23456789]\d{9}$/;
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!phoneRule.test(value)) {
        callback(new Error("手机号码格式错误"));
      } else {
        callback();
      }
    };
    return {
      userMessage:null,
      registerParams: [],
      isShow: true,
      isRegisterIsShow: false,
      ruleForm: {
        cardId: "",
        cardType: "",
        // phone: "",
        // code: "",
      },
      rules: {
        cardType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        cardId: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
        ],
        // phone: [
        //   {
        //     required: true,
        //     validator: phone_rule,
        //     trigger: ["blur", "change"],
        //   },
        // ],
        // code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getCaptcha(captcha){
      console.log('传递验证码参数对象',captcha)

      this.getPersonVerify(captcha);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          this.$refs.captcha.show();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取用户信息
    getUserInfo() {
      console.log('获取用户信息',this.$cookies.get("open_id"),this.$cookies.get("transactionNo"));
      if(this.$route.query.personName){
        let params = {
          openid:this.$cookies.get("open_id"),
          verified_serialno:this.$cookies.get("transactionNo")
        }
        getPersonUserInfo(params).then(res =>{
          console.log('用户信息',res)
          this.userMessage = res;
          let cardId = this.$cookies.get(res.person.idCard);
          console.log("cardId",cardId);
          if(cardId != null){
            this.isRegisterIsShow = true
          }else{
            this.$router.push('/user/register');
            this.$message({
              type:"error",
              message:"证件类型或证件号码错误"
            })
          }
        })
      }
    },
    //实名认证
    getPersonVerify(captcha) {
      let params = {
        cert_type: this.ruleForm.cardType,
        openid: this.ruleForm.cardId,
        captcha: captcha
      };
      getPersonVerifyUrl(params).then((res) => {
        console.log("实名认证", res);
        let { transactionNo, url } = res;
        this.$cookies.set(this.ruleForm.cardId, transactionNo);
        this.$cookies.set("open_id",this.ruleForm.cardId);
        this.$cookies.set("transactionNo",transactionNo)
        location.href = url;
      });
    },
    //首次报名
    firstSign(params) {
      firstsign(params)
        .then((res) => {
          this.$cookies.set("token", res.token);
          this.$store.commit("setToken", res.token);
          let {user_name} = userType(res.token);
          this.$store.commit('setUserName',user_name)
          console.log(res);
          this.$message({
            type: "success",
            message: "报名成功",
          });
          this.$router.push("/user/index");
        })
        .catch((err) => {
          this.isShow = false;
          this.$refs.registerForm.flag = false;
          console.log(err);
          this.$message({
            type: "error",
            message: err.msg,
          });
        });
    },
  },
  components: {
    registerForm,
    PasswordCaptcha,
    headerComponent
  },
};
</script>

<style>
.user-register .el-card {
  box-shadow: none;
  border: none;
}
</style>

<style scoped>
.registerLogo{
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  font-weight: 600;
  color: white;
  transform: translate(-50%, -50%);
}
.demo-ruleForm{
  width: 400px;
  margin: 0 auto;
}
.register-header {
  position: relative;
  background-image: url("../../../assets/register/jgbanner.jpg");
}
.footer-content {
  font-size: 12px;
  color: white;
}
.box-card {
  width: auto;
}

.user-register {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}
</style>
